import React, { Suspense } from 'react'
import { Switch, Router, Route, Redirect } from 'react-router-dom'
import Loading from '@/components/Loading/Loading'
import Chat from '@/pages/Profile/chat'
import AuthRoute from '@/components/AuthRoute'
import history from '@/utils/history'
import NotFound from '@/pages/NotFound'
const Layout = React.lazy(() => import('@/pages/Layout'))
const Login = React.lazy(() => import('@/pages/Login'))
const Edit = React.lazy(() => import('@/pages/Profile/Edit'))
const App = () => {
  return (
    <Router history={history}>
      <Suspense fallback={<Loading></Loading>}>
        <Switch fallback={<div>loading</div>}>
          <Redirect exact to={'/home'} from={'/'}></Redirect>
          <Route path={'/login'} component={Login}></Route>
          <Route path={'/home'} component={Layout}></Route>
          <AuthRoute path={'/profile/edit'} component={Edit}></AuthRoute>
          <AuthRoute path={'/profile/chat'} component={Chat}></AuthRoute>
          <Route component={NotFound}></Route>
        </Switch>
      </Suspense>
    </Router>
  )
}

export default App
